﻿$(document).ready(function() {

	$.namespace("history", {
		inherited: true,

		InitialiseControl: function() {

			var mthStore = new Ext.data.JsonStore({
				fields: ['MonthIndex', 'MonthName'],
				data: $.fn.global.Months(true)
			});

			var cboMonth = new Ext.form.ComboBox({
				id: 'cboMonth',
				store: mthStore,
				fieldLabel: 'Month',
				displayField: 'MonthName',
				valueField: 'MonthIndex',
				//				hiddenName: 'SelectedMonth',
				typeAhead: true,
				mode: 'local',
				triggerAction: 'all',
				emptyText: 'Select a month...',
				listWidth: 70,
				//fieldClass: 'fieldLeftPadding',
				//style: 'padding-left: 55px;',
				labelStyle: 'width: 50px;'
			});

			var mthCatCombo = new Ext.form.ComboBox({
				store: new Ext.data.JsonStore({
					fields: ['MthCategoryId', 'CategoryName'],
					data: $.fn.global.CurrentMonthCategories()
				}),
				displayField: 'CategoryName',
				valueField: 'MthCategoryId',
				typeAhead: true,
				mode: 'local',
				triggerAction: 'all'
				//lazyRender: true,
			});


			function DetailsGrid(MthCategoryId, CategoryName) {
				//helper functions
				function formatDate(value) {
					return value ? value.dateFormat('d / M / Y') : '';
				}

				//proxy
				var proxy = new Ext.data.HttpProxy({
					url: 'Data/Spendings.aspx'
				});

				//reader
				var reader = new Ext.data.JsonReader({
					root: 'Data',
					totalProperty: 'Count',
					idProperty: 'SpendingId',
					fields: [
						{ name: 'SpendingId', type: 'int' },
						{ name: 'Description', type: 'string', allowBlank: false },
						{ name: 'DateSpent', type: 'date', dateFormat: 'M$', allowBlank: false },
						{ name: 'Amount', type: 'float', allowBlank: false },
						{ name: 'MthCategoryId', type: 'int', allowBlank: false },
						{ name: 'Timestamp', type: 'date', dateFormat: 'M$' },
						{ name: 'Version', type: 'auto' }
					]
				});

				//store
				var store = new Ext.data.Store({
					id: 'dsMths',
					proxy: proxy,
					reader: reader,
					sortInfo: {
						field: 'DateSpent',
						direction: 'ASC'
					},
					listeners: {
						'beforeload': function(store, options) {
							if (true) { }
							options.params['xaction'] = 'listspendingsbymonthcategoryid';
							options.params['mthcategoryid'] = MthCategoryId
						}
					}
				});

				//colModel
				var colModel = new Ext.grid.ColumnModel({
					defaults: {
						sortable: true
					},
					columns: [
						{ header: 'Date Spent', dataIndex: 'DateSpent', renderer: formatDate },
						{ header: 'Amount', dataIndex: 'Amount', align: 'right', xtype: 'numbercolumn', format: '$0,0.00' },
						{ header: 'Description', dataIndex: 'Description' }
					//{ header: 'Month Category', dataIndex: 'MthCategoryId', editor: mthCatCombo, renderer: $.fn.global.ComboRenderer(mthCatCombo) }
					]
				});

				//grid
				var grid = new Ext.grid.GridPanel({
					id: 'DetailsGrid',
					iconCls: 'icon-grid',
					frame: true,
					title: 'Spendings For ' + CategoryName,
					loadMask: true,
					autoScroll: true,
					height: 300,
					store: store,
					colModel: colModel,
					viewConfig: {
						forceFit: true
					}
				});

				//return the grid...
				return grid;
			}

			function CreatePanel() {
				var tabContent = $("#HistoryContainer").children(".TabContent");

				var historyPanel = new Ext.Panel({
					id: 'historyPanel',
					//title: 'Panel Title',
					layout: 'column',
					padding: 0,
					bodyBorder: false,
					border: false,
					items: [{
						xtype: 'fieldset',
						title: 'User Information',
						autoHeight: true,
						padding: '0 10 0 10',
						columnWidth: 0.20,
						items: [cboMonth,
						{
							id: 'txtYear',
							xtype: 'textfield',
							fieldLabel: 'Year',
							width: 50
						}, {
							xtype: 'button',
							width: 75,
							text: 'Search',
							handler: function() {

								var cboMonth = Ext.getCmp('cboMonth');
								var txtYear = Ext.getCmp('txtYear');
								var selectedDate = new Date();
								selectedDate.setFullYear(txtYear.getValue(), cboMonth.getValue() - 1, 1);

								var regMthCategorySummary = Ext.getCmp('regMthCategorySummary');

								var oldItem = regMthCategorySummary.items.itemAt(0);
								oldItem.destroy();

								var historyGrid = $.fn.global.SummaryGrid(selectedDate, false);
								regMthCategorySummary.items.add(historyGrid);

								regMthCategorySummary.doLayout();

								historyGrid.getStore().load();
								historyGrid.addListener('rowclick', function(grid, rowIndex, event) {
									if (true) { }
									var regDetails = Ext.getCmp('regDetails');

									var oldItem;
									if (regDetails.items.length > 0) {
										oldItem = regDetails.items.itemAt(0);
										oldItem.destroy();
									}
									var mcId = grid.getStore().data.items[rowIndex].id;
									var selectedItem = grid.getStore().data.items[rowIndex];

									var detailsGrid;
									detailsGrid = DetailsGrid(selectedItem.get('MthCategoryId'), selectedItem.get('CategoryName'));
									regDetails.items.add(detailsGrid);
									detailsGrid.getStore().load();
									regDetails.doLayout();
								});
							}
}]
						}, {
							id: 'regMthCategorySummary',
							border: false,
							padding: '0px 5px 0px 5px',
							columnWidth: 0.40,
							//verticalAlign: 'top',
							items: [$.fn.global.SummaryGrid()]
							//html: '<p>This is some longer content.</p><p>This is some longer content.</p><p>This is some longer content.</p><p>This is some longer content.</p><p>This is some longer content.</p><p>This is some longer content.</p>'
						}, {
							id: 'regDetails',
							border: false,
							padding: '0px 0px 0px 5px',
							columnWidth: 0.40,
							//verticalAlign: 'top',
							items: []
							//html: '<p>This is some longer content.</p><p>This is some longer content.</p><p>This is some longer content.</p><p>This is some longer content.</p><p>This is some longer content.</p><p>This is some longer content.</p>'
}]
						});

						historyPanel.render(tabContent[0]);

					};

					//draw the page	
					CreatePanel();

				}
			});
		});